<template>
    <div>
        <x-button v-for="(item,index) in buttonType" :loading="index%2===0&&index<3" :disabled="index%2!==0" :key="index" :type="item"
            @click="alert">{{item}}
        </x-button>
        <x-button size="small" @click="alert">asd</x-button>
        <x-button size="large" :outlined="true" type="warning" icon="camera-retro">asd</x-button>
        <x-button size="medium" icon="circle-o-notch spin fw" :disabled="true" @click="alert"></x-button>
        <x-button>asd</x-button>
        <x-button size="large" type="warning" icon="camera-retro"></x-button>
        <x-button-group>
            <x-button v-for="(item,index) in buttonType" :key="index" :type="item">{{item}}</x-button>
        </x-button-group>
        <x-button-group :compact="true">
            <x-button v-for="(item,index) in buttonType" :key="index" :type="item">{{item}}</x-button>
        </x-button-group>

        <x-button-group :compact="false">
            <x-button v-for="(item,index) in buttonType" :key="index" :type="item">{{item}}</x-button>
        </x-button-group>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                buttonType: [
                    "default",
                    "primary",
                    "link",
                    "info",
                    "success",
                    "warning",
                    "danger"
                ],
            }
        },
        methods: {
            alert() {
                alert(1);
            },
        }
    }

</script>